<template>
<div>
<div class="serch">
<mt-search v-model="value">

</mt-search>
<mt-button tepe="default" class="serch-bt" v-on:click="SerchClick">搜索</mt-button>

</div>
<p v-show="!show">没有搜素记录</p>
<div v-show="show">
<p>搜索历史</p>
<ul style="width:95%;margin:auto;"> 
  <li v-for="(item, index) in serchList" :key="index" class="sarch-list">
 <router-link :to="{path:'searchresult/'+item}" class="history">{{item}}</router-link>
  <mt-button type="danger" style="float:right;" v-on:click="deleteSerch(index)">
  x
  </mt-button>
  </li>
</ul>
</div>
</div>
</template>

<script>
import { Toast } from "mint-ui"
export default {
  data() {
    return {
      value:"",
      serchList:[],
      show:false
    }
  },mounted() {
         if("serchList" in localStorage){
        this.serchList=JSON.parse(localStorage.serchList)
          }if(this.serchList.length){
            this.show=true
          }
          
  },methods: {
      SerchClick(){
        if(!this.value==" "){
          if("serchList" in localStorage){
            this.serchList=JSON.parse(localStorage.serchList)
              if(this.serchList.indexOf(this.value)<0){
            this.serchList.push(this.value)
            }
             localStorage.serchList=JSON.stringify(this.serchList)
             this.$router.push('searchresult/'+this.value) 
          }else{
            if(this.serchList.indexOf(this.value)<0){
            this.serchList.push(this.value)
            }
             localStorage.serchList=JSON.stringify(this.serchList)
             this.$router.push('searchresult/'+this.value) 

          }

        }else{
          Toast("不能为空");

        }
      },
      deleteSerch(index){
        this.serchList.splice(index,1)
        localStorage.serchList=JSON.stringify(this.serchList)
        if(!this.serchList.length){
          this.show=false
        }
      }
  }
}
</script>

<style scoped>
.mint-search{
  height:80px;
  margin-top:-20px;
}
.serch-bt{
  position:absolute;
  right:0;
  top:45px;
  z-index:23;
}

.sarch-list{
  text-align:left;
  line-height:50px;
}
.history{
  display:inline-block;
  width:calc(100% - 50px);
  height:50px;
}
 

</style>
